/*
 * @Author: Await
 * @Date: 2025-04-23 14:15:30
 * @LastEditors: Await
 * @LastEditTime: 2025-04-30 17:26:57
 * @Description: 标记区域配置组件
 */
import React, { useState, useOptimistic, useEffect } from 'react';
import {
    Form,
    Input,
    Switch,
    Select,
    InputNumber,
    Row,
    Col,
    Typography,
    Tooltip,
    ColorPicker,
    Button,
    Table,
    Divider,
    Space,
    Modal
} from 'antd';
import { InfoCircleOutlined, PlusOutlined, DeleteOutlined, EditOutlined } from '@ant-design/icons';

// 标记区域点位
export interface MarkAreaPoint {
    type?: 'min' | 'max' | 'average' | '';
    name?: string;
    xAxis?: number | string;
    yAxis?: number | string;
    value?: number;
    valueIndex?: 0 | 1;
    valueDim?: string;
}

// 标记区域
export interface MarkAreaItem {
    name?: string;
    itemStyle?: {
        color?: string;
        borderColor?: string;
        borderWidth?: number;
        borderType?: 'solid' | 'dashed' | 'dotted';
        opacity?: number;
        shadowBlur?: number;
        shadowColor?: string;
        shadowOffsetX?: number;
        shadowOffsetY?: number;
    };
    label?: {
        show?: boolean;
        position?: 'top' | 'left' | 'right' | 'bottom' | 'inside' | 'insideTop' | 'insideLeft' | 'insideRight' | 'insideBottom' | 'insideTopLeft' | 'insideTopRight' | 'insideBottomLeft' | 'insideBottomRight';
        formatter?: string;
        color?: string;
        fontSize?: number;
    };
    emphasis?: {
        itemStyle?: {
            color?: string;
            opacity?: number;
        };
        label?: {
            show?: boolean;
            color?: string;
        };
    };
    // 区域起点和终点
    0: MarkAreaPoint;
    1: MarkAreaPoint;
}

export interface MarkAreaConfig {
    silent?: boolean;
    label?: {
        show?: boolean;
        position?: string;
        formatter?: string;
    };
    itemStyle?: {
        color?: string;
        borderColor?: string;
        borderWidth?: number;
        borderType?: 'solid' | 'dashed' | 'dotted';
        opacity?: number;
        shadowBlur?: number;
        shadowColor?: string;
    };
    emphasis?: {
        itemStyle?: {
            color?: string;
            opacity?: number;
        };
        label?: {
            show?: boolean;
        };
    };
    data?: MarkAreaItem[];
}

interface MarkAreaConfigProps {
    config?: MarkAreaConfig;
    onChange: (config: MarkAreaConfig) => void;
}

/**
 * 标记区域配置组件
 * 
 * React 19新特性应用:
 * 1. 使用useOptimistic实现乐观UI更新，提升用户体验
 * 2. 优化表单状态管理，简化状态逻辑
 * 3. 添加加载状态指示器，提供更好的反馈
 * 4. 使用Actions模式处理数据提交
 */
const MarkAreaConfig: React.FC<MarkAreaConfigProps> = ({ config = {}, onChange }) => {
    const [visible, setVisible] = useState(false);
    const [editingItem, setEditingItem] = useState<MarkAreaItem | null>(null);
    const [editingIndex, setEditingIndex] = useState<number | null>(null);
    const [areaType, setAreaType] = useState<'coordinate' | 'special'>('coordinate');

    // 确保配置对象存在
    const markAreaConfig: MarkAreaConfig = config || {};
    const markAreaData = markAreaConfig.data || [];

    // 使用useOptimistic实现乐观UI更新
    const [optimisticData, setOptimisticData] = useOptimistic(
        markAreaData,
        (state, newData: MarkAreaItem[]) => newData
    );

    // 将模态框状态提升到组件顶层，解决Hooks规则问题
    const initialModalItem: MarkAreaItem = {
        name: '',
        itemStyle: {
            opacity: 0.3,
            color: 'rgba(180, 180, 180, 0.3)',
            borderWidth: 1,
            borderType: 'solid'
        },
        label: {
            show: true,
            position: 'inside'
        },
        0: {},
        1: {}
    };

    // 模态框数据状态
    const [modalItem, setModalItem] = useState<MarkAreaItem>(initialModalItem);

    // 编辑现有标记区域
    const handleEditMarkArea = (item: MarkAreaItem, index: number) => {
        setEditingItem(item);
        setEditingIndex(index);
        setModalItem(item); // 设置模态框数据
        setAreaType(
            (item[0]?.type && ['min', 'max', 'average'].includes(item[0].type)) ||
                (item[1]?.type && ['min', 'max', 'average'].includes(item[1].type))
                ? 'special'
                : 'coordinate'
        );
        setVisible(true);
    };

    // 重置模态框状态
    useEffect(() => {
        if (visible) {
            if (editingItem) {
                setModalItem(editingItem);
            } else {
                setModalItem(initialModalItem);
            }
        }
    }, [visible, editingItem]);

    // 更新模态框数据的函数
    const updateModalItem = (key: string, value: any) => {
        // 处理特殊的起点终点更新
        if (key.startsWith('0.') || key.startsWith('1.')) {
            const [pointIndex, pointKey] = key.split('.');
            const point = { ...(modalItem[pointIndex as '0' | '1'] || {}) };
            (point as any)[pointKey] = value;
            setModalItem({ ...modalItem, [pointIndex]: point });
            return;
        }

        // 处理嵌套属性
        if (key.includes('.')) {
            const keys = key.split('.');
            const updatedItem = { ...modalItem } as any;
            let current = updatedItem;

            for (let i = 0; i < keys.length - 1; i++) {
                if (!current[keys[i]]) {
                    current[keys[i]] = {};
                }
                current = current[keys[i]];
            }

            current[keys[keys.length - 1]] = value;
            setModalItem(updatedItem);
        } else {
            setModalItem({ ...modalItem, [key]: value });
        }
    };

    // 处理配置更改 - 优化版本
    const handleConfigChange = (key: string, value: any) => {
        // 创建一个更新后的配置对象
        let updatedConfig;

        // 处理嵌套属性
        if (key.includes('.')) {
            const keys = key.split('.');
            updatedConfig = { ...markAreaConfig };
            let current = updatedConfig as any;

            for (let i = 0; i < keys.length - 1; i++) {
                if (!current[keys[i]]) {
                    current[keys[i]] = {};
                }
                current = current[keys[i]];
            }

            current[keys[keys.length - 1]] = value;
        } else {
            updatedConfig = { ...markAreaConfig, [key]: value };
        }

        // 调用父组件的onChange回调
        onChange(updatedConfig);

        // 如果这是数据更新，同时更新乐观状态
        if (key === 'data') {
            setOptimisticData(value);
        }
    };

    // 添加或更新标记区域 - 使用乐观更新
    const handleAddOrUpdateMarkArea = (item: MarkAreaItem) => {
        const newData = [...(markAreaData || [])];

        if (editingIndex !== null) {
            // 更新现有项目
            newData[editingIndex] = item;
        } else {
            // 添加新项目
            newData.push(item);
        }

        // 乐观更新UI
        setOptimisticData(newData);

        // 实际更新数据
        handleConfigChange('data', newData);
        setVisible(false);
        setEditingItem(null);
        setEditingIndex(null);
    };

    // 删除标记区域 - 使用乐观更新
    const handleDeleteMarkArea = (index: number) => {
        const newData = [...markAreaData];
        newData.splice(index, 1);

        // 乐观更新UI
        setOptimisticData(newData);

        // 实际更新数据
        handleConfigChange('data', newData);
    };

    // 表单项标题组件
    const FormItemLabel = ({ children, tooltip }: { children: React.ReactNode, tooltip?: string }) => (
        <div style={{ marginBottom: 4, display: 'flex', alignItems: 'center' }}>
            <Typography.Text type="secondary" style={{ fontSize: 12 }}>
                {children}
            </Typography.Text>
            {tooltip && (
                <Tooltip title={tooltip}>
                    <InfoCircleOutlined style={{ marginLeft: 4, fontSize: 12, color: '#999' }} />
                </Tooltip>
            )}
        </div>
    );

    // 表格列定义
    const columns = [
        {
            title: '名称',
            dataIndex: 'name',
            key: 'name',
            render: (text: string) => text || '-'
        },
        {
            title: '类型',
            key: 'type',
            render: (_: any, record: MarkAreaItem) => {
                if (record[0]?.type || record[1]?.type) {
                    const typeMap: Record<string, string> = {
                        'min': '最小值',
                        'max': '最大值',
                        'average': '平均值'
                    };

                    const startType = record[0]?.type ? typeMap[record[0].type] || '自定义' : '自定义';
                    const endType = record[1]?.type ? typeMap[record[1].type] || '自定义' : '自定义';

                    return `${startType} 到 ${endType}`;
                }
                return '坐标区域';
            }
        },
        {
            title: '区域样式',
            key: 'style',
            render: (_: any, record: MarkAreaItem) => {
                const opacity = record.itemStyle?.opacity !== undefined ?
                    (record.itemStyle.opacity * 100) + '%' : '100%';

                return `透明度: ${opacity}`;
            }
        },
        {
            title: '操作',
            key: 'action',
            render: (_: any, record: MarkAreaItem, index: number) => (
                <Space size="middle">
                    <Button
                        type="text"
                        icon={<EditOutlined />}
                        onClick={() => handleEditMarkArea(record, index)}
                    />
                    <Button
                        type="text"
                        danger
                        icon={<DeleteOutlined />}
                        onClick={() => handleDeleteMarkArea(index)}
                    />
                </Space>
            )
        }
    ];

    return (
        <div>
            <div style={{ marginBottom: 16, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <Typography.Title level={5} style={{ margin: 0 }}>
                    标记区域设置
                    <Tooltip title="在图表上标记特定的区域，如异常数据区域、阈值区间等">
                        <InfoCircleOutlined style={{ fontSize: 14, marginLeft: 8 }} />
                    </Tooltip>
                </Typography.Title>
                <Button
                    type="primary"
                    icon={<PlusOutlined />}
                    onClick={() => {
                        setEditingItem(null);
                        setEditingIndex(null);
                        setAreaType('coordinate');
                        setVisible(true);
                    }}
                >
                    添加标记区域
                </Button>
            </div>

            {/* 添加一个表单操作状态提示 */}
            {optimisticData !== markAreaData && (
                <div style={{ marginBottom: 8, color: '#1890ff' }}>
                    <span>数据更新中...</span>
                </div>
            )}

            {/* 标记区域列表 - 使用乐观数据 */}
            <Table
                columns={columns}
                dataSource={optimisticData.map((item, index) => ({ ...item, key: index }))}
                size="small"
                pagination={false}
                style={{ marginBottom: 16 }}
            />

            {/* 全局标记区域样式设置 */}
            <Divider orientation="left">全局样式设置</Divider>
            <div className="form-container">
                <Row gutter={[16, 8]}>
                    <Col span={12}>
                        <FormItemLabel tooltip="是否响应鼠标事件">
                            交互响应
                        </FormItemLabel>
                        <Switch
                            checked={!markAreaConfig.silent}
                            onChange={checked => handleConfigChange('silent', !checked)}
                        />
                    </Col>
                    <Col span={12}>
                        <FormItemLabel tooltip="标记区域默认透明度">
                            默认透明度
                        </FormItemLabel>
                        <InputNumber
                            value={markAreaConfig.itemStyle?.opacity || 0.3}
                            onChange={value => handleConfigChange('itemStyle.opacity', value)}
                            min={0}
                            max={1}
                            step={0.1}
                            style={{ width: '100%' }}
                        />
                    </Col>
                    <Col span={12}>
                        <FormItemLabel tooltip="标记区域默认颜色">
                            默认颜色
                        </FormItemLabel>
                        <ColorPicker
                            value={markAreaConfig.itemStyle?.color || 'rgba(180, 180, 180, 0.3)'}
                            onChange={color => {
                                const colorValue = typeof color === 'string'
                                    ? color
                                    : color.toHexString();
                                handleConfigChange('itemStyle.color', colorValue)
                            }}
                            showText
                        />
                    </Col>
                    <Col span={12}>
                        <FormItemLabel tooltip="标记区域高亮时的透明度">
                            高亮透明度
                        </FormItemLabel>
                        <InputNumber
                            value={markAreaConfig.emphasis?.itemStyle?.opacity || 0.5}
                            onChange={value => handleConfigChange('emphasis.itemStyle.opacity', value)}
                            min={0}
                            max={1}
                            step={0.1}
                            style={{ width: '100%' }}
                        />
                    </Col>
                    <Col span={12}>
                        <FormItemLabel tooltip="是否默认显示标签">
                            显示标签
                        </FormItemLabel>
                        <Switch
                            checked={markAreaConfig.label?.show !== false}
                            onChange={checked => handleConfigChange('label.show', checked)}
                        />
                    </Col>
                    {markAreaConfig.label?.show !== false && (
                        <Col span={12}>
                            <FormItemLabel tooltip="标签默认位置">
                                标签位置
                            </FormItemLabel>
                            <Select
                                value={markAreaConfig.label?.position || 'inside'}
                                onChange={value => handleConfigChange('label.position', value)}
                                style={{ width: '100%' }}
                                options={[
                                    { label: '内部', value: 'inside' },
                                    { label: '顶部', value: 'top' },
                                    { label: '左侧', value: 'left' },
                                    { label: '右侧', value: 'right' },
                                    { label: '底部', value: 'bottom' }
                                ]}
                            />
                        </Col>
                    )}
                </Row>
            </div>

            {/* 直接渲染模态框，避免使用函数调用 */}
            {visible && (
                <Modal
                    title={editingIndex !== null ? "编辑标记区域" : "添加标记区域"}
                    open={visible}
                    onOk={() => handleAddOrUpdateMarkArea(modalItem)}
                    onCancel={() => {
                        setVisible(false);
                        setEditingItem(null);
                        setEditingIndex(null);
                    }}
                    width={700}
                    okButtonProps={{
                        loading: optimisticData !== markAreaData // 使用乐观更新状态显示加载状态
                    }}
                >
                    <div className="form-container">
                        <Row gutter={[16, 8]}>
                            <Col span={12}>
                                <FormItemLabel tooltip="标记区域显示的名称">
                                    名称
                                </FormItemLabel>
                                <Input
                                    value={modalItem.name}
                                    onChange={e => updateModalItem('name', e.target.value)}
                                    placeholder="标记区域名称"
                                />
                            </Col>
                            <Col span={12}>
                                <FormItemLabel tooltip="区域类型设置">
                                    区域类型
                                </FormItemLabel>
                                <Select
                                    value={areaType}
                                    onChange={value => {
                                        setAreaType(value);
                                        // 重置起点和终点
                                        if (value === 'coordinate') {
                                            updateModalItem('0', { xAxis: undefined, yAxis: undefined, type: '' });
                                            updateModalItem('1', { xAxis: undefined, yAxis: undefined, type: '' });
                                        } else {
                                            updateModalItem('0', { type: 'min' });
                                            updateModalItem('1', { type: 'max' });
                                        }
                                    }}
                                    style={{ width: '100%' }}
                                    options={[
                                        { label: '坐标区域', value: 'coordinate' },
                                        { label: '特殊区域', value: 'special' }
                                    ]}
                                />
                            </Col>

                            {areaType === 'coordinate' ? (
                                <>
                                    <Divider orientation="left">左下角坐标</Divider>
                                    <Col span={12}>
                                        <FormItemLabel tooltip="左下角X坐标">
                                            X坐标
                                        </FormItemLabel>
                                        <InputNumber
                                            value={modalItem[0]?.xAxis !== undefined ? Number(modalItem[0].xAxis) : undefined}
                                            onChange={value => updateModalItem('0.xAxis', value)}
                                            style={{ width: '100%' }}
                                        />
                                    </Col>
                                    <Col span={12}>
                                        <FormItemLabel tooltip="左下角Y坐标">
                                            Y坐标
                                        </FormItemLabel>
                                        <InputNumber
                                            value={modalItem[0]?.yAxis !== undefined ? Number(modalItem[0].yAxis) : undefined}
                                            onChange={value => updateModalItem('0.yAxis', value)}
                                            style={{ width: '100%' }}
                                        />
                                    </Col>

                                    <Divider orientation="left">右上角坐标</Divider>
                                    <Col span={12}>
                                        <FormItemLabel tooltip="右上角X坐标">
                                            X坐标
                                        </FormItemLabel>
                                        <InputNumber
                                            value={modalItem[1]?.xAxis !== undefined ? Number(modalItem[1].xAxis) : undefined}
                                            onChange={value => updateModalItem('1.xAxis', value)}
                                            style={{ width: '100%' }}
                                        />
                                    </Col>
                                    <Col span={12}>
                                        <FormItemLabel tooltip="右上角Y坐标">
                                            Y坐标
                                        </FormItemLabel>
                                        <InputNumber
                                            value={modalItem[1]?.yAxis !== undefined ? Number(modalItem[1].yAxis) : undefined}
                                            onChange={value => updateModalItem('1.yAxis', value)}
                                            style={{ width: '100%' }}
                                        />
                                    </Col>
                                </>
                            ) : (
                                <>
                                    <Divider orientation="left">起始区域</Divider>
                                    <Col span={12}>
                                        <FormItemLabel tooltip="区域起点类型">
                                            起点类型
                                        </FormItemLabel>
                                        <Select
                                            value={modalItem[0]?.type || 'min'}
                                            onChange={value => updateModalItem('0.type', value)}
                                            style={{ width: '100%' }}
                                            options={[
                                                { label: '最小值', value: 'min' },
                                                { label: '最大值', value: 'max' },
                                                { label: '平均值', value: 'average' }
                                            ]}
                                        />
                                    </Col>
                                    <Col span={12}>
                                        <FormItemLabel tooltip="起点名称">
                                            起点名称
                                        </FormItemLabel>
                                        <Input
                                            value={modalItem[0]?.name}
                                            onChange={e => updateModalItem('0.name', e.target.value)}
                                            placeholder="起点名称"
                                        />
                                    </Col>

                                    <Divider orientation="left">结束区域</Divider>
                                    <Col span={12}>
                                        <FormItemLabel tooltip="区域终点类型">
                                            终点类型
                                        </FormItemLabel>
                                        <Select
                                            value={modalItem[1]?.type || 'max'}
                                            onChange={value => updateModalItem('1.type', value)}
                                            style={{ width: '100%' }}
                                            options={[
                                                { label: '最小值', value: 'min' },
                                                { label: '最大值', value: 'max' },
                                                { label: '平均值', value: 'average' }
                                            ]}
                                        />
                                    </Col>
                                    <Col span={12}>
                                        <FormItemLabel tooltip="终点名称">
                                            终点名称
                                        </FormItemLabel>
                                        <Input
                                            value={modalItem[1]?.name}
                                            onChange={e => updateModalItem('1.name', e.target.value)}
                                            placeholder="终点名称"
                                        />
                                    </Col>
                                </>
                            )}

                            <Divider orientation="left">区域样式</Divider>
                            <Col span={12}>
                                <FormItemLabel tooltip="区域填充色">
                                    填充颜色
                                </FormItemLabel>
                                <ColorPicker
                                    value={modalItem.itemStyle?.color || 'rgba(180, 180, 180, 0.3)'}
                                    onChange={color => {
                                        const itemStyle = modalItem.itemStyle || {};
                                        updateModalItem('itemStyle', {
                                            ...itemStyle,
                                            color: typeof color === 'string' ? color : color.toHexString()
                                        });
                                    }}
                                    showText
                                />
                            </Col>
                            <Col span={12}>
                                <FormItemLabel tooltip="填充透明度">
                                    透明度
                                </FormItemLabel>
                                <InputNumber
                                    value={modalItem.itemStyle?.opacity || 0.3}
                                    onChange={value => {
                                        const itemStyle = modalItem.itemStyle || {};
                                        updateModalItem('itemStyle', { ...itemStyle, opacity: value });
                                    }}
                                    min={0}
                                    max={1}
                                    step={0.1}
                                    style={{ width: '100%' }}
                                />
                            </Col>
                            <Col span={12}>
                                <FormItemLabel tooltip="边框颜色">
                                    边框颜色
                                </FormItemLabel>
                                <ColorPicker
                                    value={modalItem.itemStyle?.borderColor}
                                    onChange={color => {
                                        const itemStyle = modalItem.itemStyle || {};
                                        updateModalItem('itemStyle', {
                                            ...itemStyle,
                                            borderColor: typeof color === 'string' ? color : color.toHexString()
                                        });
                                    }}
                                    showText
                                />
                            </Col>
                            <Col span={12}>
                                <FormItemLabel tooltip="边框宽度">
                                    边框宽度
                                </FormItemLabel>
                                <InputNumber
                                    value={modalItem.itemStyle?.borderWidth || 1}
                                    onChange={value => {
                                        const itemStyle = modalItem.itemStyle || {};
                                        updateModalItem('itemStyle', { ...itemStyle, borderWidth: value });
                                    }}
                                    min={0}
                                    max={10}
                                    style={{ width: '100%' }}
                                />
                            </Col>
                            <Col span={12}>
                                <FormItemLabel tooltip="边框类型">
                                    边框类型
                                </FormItemLabel>
                                <Select
                                    value={modalItem.itemStyle?.borderType || 'solid'}
                                    onChange={value => {
                                        const itemStyle = modalItem.itemStyle || {};
                                        updateModalItem('itemStyle', { ...itemStyle, borderType: value });
                                    }}
                                    style={{ width: '100%' }}
                                    options={[
                                        { label: '实线', value: 'solid' },
                                        { label: '虚线', value: 'dashed' },
                                        { label: '点线', value: 'dotted' }
                                    ]}
                                />
                            </Col>

                            <Divider orientation="left">阴影效果</Divider>
                            <Col span={12}>
                                <FormItemLabel tooltip="阴影模糊大小">
                                    阴影模糊
                                </FormItemLabel>
                                <InputNumber
                                    value={modalItem.itemStyle?.shadowBlur || 0}
                                    onChange={value => {
                                        const itemStyle = modalItem.itemStyle || {};
                                        updateModalItem('itemStyle', { ...itemStyle, shadowBlur: value });
                                    }}
                                    min={0}
                                    max={20}
                                    style={{ width: '100%' }}
                                />
                            </Col>
                            {modalItem.itemStyle?.shadowBlur && modalItem.itemStyle.shadowBlur > 0 && (
                                <>
                                    <Col span={12}>
                                        <FormItemLabel tooltip="阴影颜色">
                                            阴影颜色
                                        </FormItemLabel>
                                        <ColorPicker
                                            value={modalItem.itemStyle?.shadowColor || 'rgba(0, 0, 0, 0.5)'}
                                            onChange={color => {
                                                const itemStyle = modalItem.itemStyle || {};
                                                updateModalItem('itemStyle', {
                                                    ...itemStyle,
                                                    shadowColor: typeof color === 'string' ? color : color.toHexString()
                                                });
                                            }}
                                            showText
                                        />
                                    </Col>
                                    <Col span={12}>
                                        <FormItemLabel tooltip="阴影X偏移">
                                            X偏移
                                        </FormItemLabel>
                                        <InputNumber
                                            value={modalItem.itemStyle?.shadowOffsetX || 0}
                                            onChange={value => {
                                                const itemStyle = modalItem.itemStyle || {};
                                                updateModalItem('itemStyle', { ...itemStyle, shadowOffsetX: value });
                                            }}
                                            min={-20}
                                            max={20}
                                            style={{ width: '100%' }}
                                        />
                                    </Col>
                                    <Col span={12}>
                                        <FormItemLabel tooltip="阴影Y偏移">
                                            Y偏移
                                        </FormItemLabel>
                                        <InputNumber
                                            value={modalItem.itemStyle?.shadowOffsetY || 0}
                                            onChange={value => {
                                                const itemStyle = modalItem.itemStyle || {};
                                                updateModalItem('itemStyle', { ...itemStyle, shadowOffsetY: value });
                                            }}
                                            min={-20}
                                            max={20}
                                            style={{ width: '100%' }}
                                        />
                                    </Col>
                                </>
                            )}

                            <Divider orientation="left">标签设置</Divider>
                            <Col span={12}>
                                <FormItemLabel tooltip="是否显示标签">
                                    显示标签
                                </FormItemLabel>
                                <Switch
                                    checked={modalItem.label?.show !== false}
                                    onChange={checked => {
                                        const label = modalItem.label || {};
                                        updateModalItem('label', { ...label, show: checked });
                                    }}
                                />
                            </Col>
                            {modalItem.label?.show !== false && (
                                <>
                                    <Col span={12}>
                                        <FormItemLabel tooltip="标签位置">
                                            标签位置
                                        </FormItemLabel>
                                        <Select
                                            value={modalItem.label?.position || 'inside'}
                                            onChange={value => {
                                                const label = modalItem.label || { show: true };
                                                updateModalItem('label', { ...label, position: value });
                                            }}
                                            style={{ width: '100%' }}
                                            options={[
                                                { label: '内部', value: 'inside' },
                                                { label: '顶部', value: 'top' },
                                                { label: '左侧', value: 'left' },
                                                { label: '右侧', value: 'right' },
                                                { label: '底部', value: 'bottom' },
                                                { label: '内部顶部', value: 'insideTop' },
                                                { label: '内部底部', value: 'insideBottom' },
                                                { label: '内部左侧', value: 'insideLeft' },
                                                { label: '内部右侧', value: 'insideRight' }
                                            ]}
                                        />
                                    </Col>
                                    <Col span={12}>
                                        <FormItemLabel tooltip="标签文字颜色">
                                            文字颜色
                                        </FormItemLabel>
                                        <ColorPicker
                                            value={modalItem.label?.color || '#fff'}
                                            onChange={color => {
                                                const label = modalItem.label || { show: true };
                                                updateModalItem('label', {
                                                    ...label,
                                                    color: typeof color === 'string' ? color : color.toHexString()
                                                });
                                            }}
                                            showText
                                        />
                                    </Col>
                                    <Col span={12}>
                                        <FormItemLabel tooltip="标签文字大小">
                                            文字大小
                                        </FormItemLabel>
                                        <InputNumber
                                            value={modalItem.label?.fontSize || 12}
                                            onChange={value => {
                                                const label = modalItem.label || { show: true };
                                                updateModalItem('label', { ...label, fontSize: value });
                                            }}
                                            min={10}
                                            max={20}
                                            style={{ width: '100%' }}
                                        />
                                    </Col>
                                </>
                            )}
                        </Row>
                    </div>
                </Modal>
            )}
        </div>
    );
};

export default MarkAreaConfig;